<template>
  <div style="padding-bottom: 50px">
    <nav-bar>
      {{$store.state.cityName}}
    </nav-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      :offset="-40"
    >
      <van-cell v-for="item in list" :key="item.id" >
        <p>{{item.id}}</p>
        <p>{{item.title}}</p>
        <p>{{item.author}}</p>
      </van-cell>

    </van-list>
  </div>
</template>

<script>
import navBar from "@/components/NavBar2";
import Vue from 'vue';
import { List,Cell,Toast} from 'vant';
import 'vant/lib/index.css';
import http from "@/util/http";

Vue.use(Cell);
Vue.use(List);
Vue.use(Toast);

export default {
  components:{
    navBar
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      a:1,
    };
  },
  mounted() {
    // 使用vuex   直接在vuex中使用axios请求
    // vuex 默认缓存   判断是否已经请求过了
    // if(this.$store.state.cinemaList.length === 0){
    //   this.$store.dispatch('getCinemaData')
    // }

    http(`posts1`).then(res =>{
      this.list = res.data
    })
  },
  methods: {

    onLoad() {
      this.a++
      if (this.a == 3){
        this.finished = true;
      }
      //加载提示
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration:1000
      });
      // 异步更新数据
      setTimeout(res =>{
        http(`posts${this.a}`).then(res =>{
          this.list = [...this.list,...res.data]
          this.loading = false;
        })


        },1200)



      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }
      //
      //   // 加载状态结束
      //   this.loading = false;
      //
      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);
    },
  },
};
</script>

<style scoped>

</style>
